<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page import="org.liufeng.course.service.RequestService"%> 
<%@ page import="net.sf.json.*"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";



%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'chart.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
			<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>
		<script type="text/javascript">
function strToJson(str){   
     var json = eval(str);  
     return json;   
}  
	
	
	
	
$(function () {
	var url = "http://fhs.fxpt.org:8090/HyDroDataService/service/queryRRChartProcess.action?stcd=1&st=2014-05-10&et=2014-05-15&TMType=2";
	$.ajax({
	dataType: 'jsonp',
	url: url,
	success: function(data){
		var dataobj = data[0].data;
		var dataobj1 = data[1].data;
		var dataobj2 = data[3].data;
			charts(dataobj,dataobj1,dataobj2);
		}
	})
 });
 
function charts(data1,date2) {
    $('#container').highcharts({
        chart: {
            type: 'spline'
        },
        title: {
            text: '奉化水位曲线图'
        },
        subtitle: {
            text: '时间（天）分布'
        },
        xAxis: {
            type: 'datetime',
            dateTimeLabelFormats: { // don't display the dummy year
                 day: '%Y-%m-%d'
                
            }
        },
        yAxis: {
            title: {
                text: '单位（mm）'
            },
            min: 0
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    Highcharts.dateFormat('%Y-%m-%d', this.x) +': '+ this.y +'mm';
            }
        },
        
        series: [{
            name: '水位',
            data: data1
            }, 
           {
            name: '正常水位',
            data: date2
            }]
    });
};
		</script>
	</head>
	<body>


<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

	</body>
</html>
